<template>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

//数据
const x_data = ref(['2020', '2021', '2022', '2023'])
const y_data1 = ref([97.5, 120.0, 113.9, 118.6])
const y_data2 = ref([83.8, 105.0, 101.9, 106.9])
const y_data3 = ref([4.3, 1.6, 1.1, -0.4])
//1. 创建dom引用
const chart = ref()

// setup组合式api都是在dom元素挂载之前执行
// echart的渲染时机是在dom元素挂载之后，所以需要将代码写在onMounted()钩子函数中
onMounted(() => {
    // 2.基于创建好的dom，初始化echarts实例
    const myChart = echarts.init(chart.value);

    // 3.指定数据和配置项
    const option = {
        //背景颜色
        backgroundColor: "white",
        //标题
        title: {
            text: "图1 七大行业税收与总税收对比图",
            left: "center",
            bottom: 5,
            show: false,
            textStyle: {
                fontFamily: "SimHei",
                fontSize: 12
            }
        },
        //图例
        legend: {
            //距离顶部的距离
            top: 15,
            //文本样式设置
            textStyle: {
                fontFamily: "Arial",
                fontWeight: "bold",
                fontSize: 15,
                color: "black"
            }
        },
        //绘图网格
        grid: {
            left: 70,
            right: 20,
            bottom: 40,
            top: 70,
            // width:500,
            // height:190,
        },
        //下载工具
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {
                    // 导出图片的分辨率
                    pixelRatio: 20
                },

            }
        },
        // x轴
        xAxis: {
            type: 'category',
            //控制刻度线显示
            axisTick: false,
            //刻度标签配置
            axisLabel: {
                fontFamily: "Arial",
                fontSize: 18,
                fontWeight: "bold",
                color: "black",
            },
            data: x_data.value
        },
        // y轴
        yAxis: {
            type: 'value',
            // y轴标题设置
            name: "单位:亿元",
            nameGap: 35,
            nameLocation: "center",
            nameTextStyle: {
                fontSize: 10,
                fontFamily: "Arial",
                fontWeight: "bold",
                color: "black"
            },
            min:-2,
            //y轴轴线
            axisLine: {
                show: false
            },
            //刻度标签
            axisLabel: {
                fontFamily: "Arial",
                fontSize: 18,
                fontWeight: "bold",
                color: "black"
            },
            // 控制分割线是否显示
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ddd',
                    width: 1,
                    type: "dashed",
                    opacity: 0.5
                }
            }
        },
        // 数据项
        series: [
            {
                type: 'bar',
                name: "营业收入",
                data: y_data1.value,
                //柱子宽度
                barWidth: 27,
                //系列柱之间的间距
                barGap: "0%",
                //柱条样式
                itemStyle: {
                    color: "#556fc6"
                },
                //选中变小手
                cursor: "pointer",
                //数据标签设置
                label: {
                    show: true,
                    position: 'top',
                    distance: 1,
                    //文本样式设置
                    fontFamily: "Arial",
                    // fontWeight: "bold",
                    fontSize: 13,
                    color: "black"

                }
            },
            {
                type: 'bar',
                name: "营业成本",
                data: y_data2.value,
                //柱子宽度
                barWidth: 27,
                //柱条样式
                itemStyle: {
                    color: "#91cd76"
                },
                //选中变小手
                cursor: "pointer",
                //数据标签设置
                label: {
                    show: true,
                    position: 'top',
                    distance: 1,
                    //文本样式设置
                    fontFamily: "Arial",
                    // fontWeight: "bold",
                    fontSize: 13,
                    color: "black"
                }
            },
            {
                type: 'bar',
                name: "利润",
                data: y_data3.value,
                //柱子宽度
                barWidth: 27,
                //柱条样式
                itemStyle: {
                    color: "red"
                },
                //选中变小手
                cursor: "pointer",
                //数据标签设置
                label: {
                    show: true,
                    position: 'top',
                    distance: 1,
                    //文本样式设置
                    fontFamily: "Arial",
                    // fontWeight: "bold",
                    fontSize: 13,
                    color: "black"
                }
            }
        ]
    }
    // 4.将设置和数据挂载到图形实例中
    myChart.setOption(option);
})
</script>

<style scoped>
.chart {
    width: 700px;
    height: 300px;
    /* 过渡 */
    transition: 0.5s all linear;
}

.chart:hover {
    /* 缩放 */
    transform: scale(1.025);
    /* 小手 */
    cursor: pointer;
    /* box阴影 */
    box-shadow: 0px 0px 30px gray;
}
</style>